<template>
  <a-checkbox class="status" v-model:checked="checked"></a-checkbox>
  <div class="content" :class="item.status === 1 && 'done'">
    <div class="title">{{item.title}}</div>
    <div v-if="item.details" class="details">{{item.details}}</div>
  </div>
  <a-button v-if="item.status === 0" size="small" @click="$emit('edit', item)">Edit</a-button>
  <a-button v-if="item.status === 1" size="small" @click="$emit('del', item)">Del</a-button>
</template>

<script>
import { toRefs, ref } from 'vue'
export default {
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  emits: ['edit', 'del', 'checkedChange'],
  computed: {
    checked: {
      get () {
        return !!this.item.status
      },
      set (val) {
        this.item.status = Number(val)
        this.$emit('checkedChange', this.item)
      }
    },
    titleBGC () {
      return this.checked ? '#99a8b2' : '#cee397'
    },
    detailsBGC () {
      return this.checked ? '#99a8b2' : '#8bcdcd'
    },
    textDecoration () {
      return this.checked ? 'line-through' : 'none'
    }
  }
}
</script>

<style lang="scss" scoped vars="{ titleBGC, detailsBGC, textDecoration }">
.content {
  flex: 1;
  .title {
    padding-left: 8px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    font-weight: 700;
    background-color: var(--titleBGC);
    text-decoration: var(--textDecoration);
  }
  .details {
    padding-left: 8px;
    background-color: var(--detailsBGC);
  }
}
</style>
